<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>大数据演示</title>
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="echarts,geojson" src="./static/libs/include-mapboxgl-local.js"></script>
  <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
  <style>
    #mapid {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="mapid"></div>
  <div id="mouse-position">
  </div>
  <script>
    var mousePosition = document.getElementById('mouse-position')
    //一定要去mapbox注册一个key,这个key会失效的
    mapboxgl.accessToken =
      'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
    var myChart = echarts.init(document.getElementById('mapid'), null, {
      devicePixelRatio: 1
    });

    refreshLines();

    function refreshLines() {
      myChart.showLoading();

      $.getJSON("../../static/data/echartsgl/lines/lines.json", function (data) {

        myChart.hideLoading();

        function getAirportCoord(idx) {
          return [data.airports[idx][3], data.airports[idx][4]];
        }
        var routes = data.routes.map(function (airline) {
          return [
            getAirportCoord(airline[1]),
            getAirportCoord(airline[2])
          ];
        });

        myChart.setOption({
          mapbox: {
            center: [0, 51.5],
            zoom: 1,
            pitch: 10,
            altitudeScale: 5,
            style: 'mapbox://styles/mapbox/dark-v9',
            postEffect: {
              enable: true,
              bloom: {
                intensity: 0.4
              }
            }
          },
          series: [{
            type: 'lines3D',

            coordinateSystem: 'mapbox',

            effect: {
              show: true,
              trailWidth: 2,
              trailLength: 0.2
            },

            blendMode: 'lighter',

            lineStyle: {
              width: 0,
              color: 'rgb(50, 50, 150)',
              opacity: 0.2
            },

            data: routes
          }]
        });
        var mapbox = myChart.getModel().getComponent('mapbox3D').getMapbox();
        mapbox.addControl(new MapboxLanguage(), 'top-right'); //中文支持

        //注册鼠标移动事件
        mapbox.on('mousemove', function (e) {
          //经纬度坐标转web墨卡托
          const earthRad = 6378137.0;
          const x = e.lngLat.lng * Math.PI / 180 * earthRad;
          const a = e.lngLat.lat * Math.PI / 180;
          const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
          mousePosition.innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
        });
        window.addEventListener('keydown', function () {
          myChart.dispatchAction({
            type: 'lines3DToggleEffect',
            seriesIndex: 0
          });
        });
      });

    }
  </script>
</body>

</html>